<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style type="text/css">
        span{
            color: darkmagenta;
            font-family: 微软雅黑;
        }
        .tp {
            font-family: 微软雅黑;
            background-color: antiquewhite;
            color: darkorange;
        }
    </style>
<link rel="stylesheet" type="text/css" href="../CSS/CSS.css"></head>
<body>
<br/>
<fieldset><legend><h4>作用与示例</h4></legend>
    <p>作用：类选择器是指，在页面的属性中，定义一个类，然后一个类显示类选择器中定义的样式</p>
    <p>代码示例：<pre>    &lt;style type="text/css"&gt;
       .tp{
            font-family: 微软雅黑;
            background-color: antiquewhite;
            color: darkorange;
        }
        &lt;/style&gt;
        &lt;input class="tp" type="text"&gt;
        &lt;input class="tp" type="password"&gt;
        &lt;span class="tp"&gt;我是tp中的span标签&lt;/span&gt;
        &lt;span&gt;我也是span标签&lt;/span&gt;</pre></p>
    <p>代码效果：<input class="tp" type="text" value="我是text">
        <input class="tp" type="password" value="我是password">
        <span class="tp">我是tp中的span标签</span>
        <span>我也是span标签</span>
    </p>
    <hr/>
    <p>补充：</p>
    <p>类选择器需要先用class定义一个类，然后在定义的类的名字前面加“.”，才能编写类选择器的样式</p>
    <p>类选择器可以覆盖全局选择器的样式效果，也可以覆盖标签选择器的样式效果，具有优先级别</p>
    <p>（如页面中类选择器设置字体为橙色，而标签选择器设置为紫色，span标签显示类选择器的样式效果）</p>

</fieldset>
<link rel="stylesheet" type="text/css" href="../CSS/CSS.css"></head>


</body>
</html>